<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head(title)">
        <meta charset="UTF-8">
        <!--浏览器移动端预览-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title th:replace="${title}">内容</title>
        <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
        <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
        <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
        <link rel="stylesheet" href="../static/css/prism.css" th:href="@{/css/prism.css}">
        <link rel="stylesheet" href="../static/libs/tocbot/tocbot.css" th:href="@{/libs/tocbot/tocbot.css}">

        <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    </head>
    <body>
        <!--首部-->
        <nav th:fragment="menu(idx)" class="ui inverted attached segment m-padded-tb-mini m-opacity-mini m-shadow-small">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu">
                    <h2 class="ui teal header item">天乔巴夏</h2>
                    <!--menu-->
                    <a href="index.html" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${idx==1}?'active'"><i class="archive icon"></i>首页</a>
                    <a href="type.html"  class="m-item item m-mobile-hide" th:classappend="${idx==2}?'active'"><i class="idea icon "></i>分类</a>
                    <a href="tags.html"  class="m-item item m-mobile-hide" th:classappend="${idx==3}?'active'"><i class="tags icon"></i>标签</a>
                    <a href="archives.html"  class="m-item item m-mobile-hide" th:classappend="${idx==4}?'active'"><i class="clone icon"></i>归档</a>
                    <a href="aboutme.html" th:href="@{/aboutme}"  class="m-item item m-mobile-hide" th:classappend="${idx==5}?'active'"><i class="user icon"></i>关于我</a>
                    <!--search box-->
                    <div class="right item">
                        <div class="ui icon input">
                            <input type="text" placeholder="搜索">
                            <i class="search link icon"></i>
                        </div>
                    </div>
                    <a href="admin/blogs.html" th:href="@{/admin}" class="m-item item m-mobile-hide"><i class="icon server"></i>后台管理</a>
                </div>
            </div>
            <a href="#" id="side" class="ui inverted icon button m-top-right m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--底部-->
        <footer th:fragment="footer" class="ui inverted segment vertical m-padded-tb-massive m-padded-bottom-small">
            <div class="ui center aligned container">
                <!--16-->
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../static/images/contact/wechat.dib" th:src="@{/images/contact/wechat.dib}" alt="" class="ui rounded image"
                                     style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email: 1332790762@qq.com</a>
                            <a href="#" class="item">Phone: 123456789</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header m-opacity-mini">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">
                            Java小白，从零单排。文章如果有叙述不当的地方，还望评论区批评指正。当然，如果觉得文章对你有帮助，可以点个小小的推荐，或者关注我，一起交流，共同进步！</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2020 天乔巴夏 浙ICP备20020653号</p>
            </div>

        </footer>
        <th:block th:fragment="script">
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
            <script src="../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>

            <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
            <script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
            <script src="../static/libs/tocbot/tocbot.min.js" th:src="@{/libs/tocbot/tocbot.min.js}"></script>
            <script src="../static/libs/scrollTo/jquery.scrollTo.min.js" th:src="@{/libs/scrollTo/jquery.scrollTo.min.js}"></script>
            <script src="../static/js/prism.js" th:src="@{/js/prism.js}"></script>
            <script src="../static/libs/qrcode/qrcode.min.js" th:src="@{/libs/qrcode/qrcode.min.js}"></script>
            <script src="../static/libs/waypoints/jquery.waypoints.min.js" th:src="@{/libs/waypoints/jquery.waypoints.min.js}"></script>
        </th:block>

    </body>
</html>